<template>
  <div class="main">
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <van-card v-for="item in film_list"
                :key='item.filmId'
                @click="show_detail(item.filmId)">
        <template #thumb>
          <img :src="item.poster"
               alt=""
               width="66">
        </template>
        <template #title>
          <div class="title">{{item.name}}</div>
        </template>
        <template #desc>
          <div class="desc">
            <div>
              观众评分：<span class="grade">{{item.grade}}</span>
            </div>
            <div>
              主演：{{item.actors | parseActors}}
            </div>
            <div>{{item.nation}}|{{item.runtime}}分</div>
          </div>
        </template>
        <template #tags>
          <van-tag plain
                   class="buyTicket"
                   size="large"
                   color="#ff5f14"
                   type="danger">
            购票
          </van-tag>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import uri from "@/config/uri"
import { Toast } from 'vant';
export default {
  data () {
    return {
      // 该组件电影列表的数据
      film_list: [],
      // 页码
      pageNum: 1,
      // 表示当前是否处于数据加载的时候
      loading: false,
      // 表示所有的数据是否全部加载完毕（如果其为true则即便滑动到底部也不会再触发异步请求）
      finished: false,
    }
  },
  created () {
    this.$http.get(uri.getNowList).then((res) => {
      console.log(res)
      if (res.status === 0) {
        this.film_list = res.data.films
      } else {
        Toast("获取列表数据失败！")
      }
    })
  },
  filters: {
    parseActors (actors) {
      let str = "";
      if (actors) {
        actors.forEach((el) => {
          str += el.name + " ";
        })
      } else {
        str = "暂无主演"
      }
      return str.length > 17 ? str.substr(0, 17) + "..." : str;
    }
  },
  methods: {
    onLoad () {
      this.$http.get(uri.getNowList + "?pageNum=" + this.pageNum).then((res) => {
        if (res.status === 0) {
          let maxPage = Math.ceil(res.data.total / 10);
          this.film_list = [...this.film_list, ...res.data.films]
          if (this.pageNum < maxPage) {
            this.pageNum++
          } else {
            this.finished = true
          }
          this.loading = false
        } else {
          Toast("获取列表数据失败！")
        }
      })
    },
    show_detail (filmID) {
      this.$router.push("/film/" + filmID)
    }
  }
}
</script>

<style scoped>
.title {
  color: #191a1b;
  font-size: 16px;
  line-height: 22px;
}
.desc {
  color: #797d82;
  font-size: 13px;
}
.grade {
  color: #ffb232;
  font-size: 14px;
}
.buyTicket {
  float: right;
  position: relative;
  top: -35px;
}
.van-card__thumb img {
  border-radius: 0px;
}
.van-card__thumb {
  width: 70pxs;
}
.main {
  margin-bottom: 50px;
}
</style>
